/* 动画 */
.lightAnimation1 {
    -webkit-animation: lightSlide 4s cubic-bezier(0.550, 0.085, 0.680, 0.530) both infinite;
    animation: lightSlide 4s cubic-bezier(0.550, 0.085, 0.680, 0.530) both infinite;
}

@-webkit-keyframes lightSlide {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-500px);
        transform: translateY(-500px);
        opacity: 0;
    }
}

@keyframes lightSlide {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-500px);
        transform: translateY(-500px);
        opacity: 0;
    }
}

.lightAnimation2 {
    -webkit-animation: lightSlide2 3s cubic-bezier(0.550, 0.085, 0.680, 0.530) 1s both infinite;
    animation: lightSlide2 3s cubic-bezier(0.550, 0.085, 0.680, 0.530) 1s both infinite;
}

@-webkit-keyframes lightSlide2 {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-500px);
        transform: translateY(-500px);
        opacity: 0;
    }
}

@keyframes lightSlide2 {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-700px);
        transform: translateY(-700px);
        opacity: 0;
    }
}

.lightAnimation3 {
    -webkit-animation: lightSlide3 3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both infinite;
    animation: lightSlide3 3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both infinite;
}

@-webkit-keyframes lightSlide3 {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-500px);
        transform: translateY(-500px);
        opacity: 0;
    }
}

@keyframes lightSlide3 {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-750px);
        transform: translateY(-750px);
        opacity: 0;
    }
}

.lightAnimation4 {
    -webkit-animation: lightSlide4 4s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 1s infinite;
    animation: lightSlide4 4s cubic-bezier(0.550, 0.085, 0.680, 0.530) both 1s infinite;
}

@-webkit-keyframes lightSlide4 {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-500px);
        transform: translateY(-500px);
        opacity: 0;
    }
}

@keyframes lightSlide4 {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-650px);
        transform: translateY(-650px);
        opacity: 0;
    }
}



.boxOriginal {
    -webkit-animation: boxOriginal 1.2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
    animation: boxOriginal 1.2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

@-webkit-keyframes boxOriginal {

    0%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    50% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}

@keyframes boxOriginal {

    0%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    50% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
}

.pressCenterIn {
    -webkit-animation: pressCenterIn 0.2s linear both;
    animation: pressCenterIn 0.2s linear both;
}

@-webkit-keyframes pressCenterIn {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        opacity: 1;
    }
}

@keyframes pressCenterIn {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        opacity: 1;
    }
}

.pressCenterOut {
    -webkit-animation: pressCenterOut 0.1s linear both;
    animation: pressCenterOut 0.1s linear both;
}

@-webkit-keyframes pressCenterOut {
    0% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes pressCenterOut {
    0% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

.boxMatch {
    -webkit-animation: boxMatch 1s linear infinite both;
    animation: boxMatch 1s linear infinite both;
}

@-webkit-keyframes boxMatch {

    0%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70% {
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
    }

    20%,
    40%,
    60% {
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }

    80% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px);
    }

    90% {
        -webkit-transform: translateX(-8px);
        transform: translateX(-8px);
    }
}

@keyframes boxMatch {

    0%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70% {
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);
    }

    20%,
    40%,
    60% {
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }

    80% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px);
    }

    90% {
        -webkit-transform: translateX(-8px);
        transform: translateX(-8px);
    }
}

.lidOpen {
    -webkit-animation: lidOpen 0.6s linear both;
    animation: lidOpen 0.6s linear both;
}

@keyframes lidOpen {
    0% {
        transform: translateX(0) translateY(0) rotateZ(0);
        -webkit-transform: translateX(0) translateY(0) rotateZ(0);
    }

    100% {
        transform: translateX(700px) translateY(-800px) rotateZ(360deg);
        -webkit-transform: translateX(700px) translateY(-800px) rotateZ(360deg);
    }
}

@-webkit-keyframes lidOpen {
    0% {
        transform: translateX(0) translateY(0) rotateZ(0);
        -webkit-transform: translateX(0) translateY(0) rotateZ(0);
    }

    100% {
        transform: translateX(700px) translateY(-800px) rotateZ(360deg);
        -webkit-transform: translateX(700px) translateY(-800px) rotateZ(360deg);
    }
}

.boxOpen {
    -webkit-animation: boxOpen 2s linear both;
    animation: boxOpen 2s linear both;
}

@-webkit-keyframes boxOpen {

    0%,
    100% {
        transform: scaleY(1) translateY(0);
    }

    10% {
        transform: scaleY(0.98) translateY(-48px);
    }

    50% {
        transform: scaleY(1) translateY(-70px);
    }
}

@keyframes boxOpen {

    0%,
    100% {
        transform: scaleY(1) translateY(0);
    }

    10% {
        transform: scaleY(0.98) translateY(-48px);
    }

    50% {
        transform: scaleY(1) translateY(-70px);
    }
}

.ribbon1Animation {
    -webkit-animation: ribbon1Animation 5s linear both;
    animation: ribbon1Animation 5s linear both;
}

@keyframes ribbon1Animation {
    0% {
        opacity: 0;
        transform: translateX(0) translateY(0) rotateZ(0) rotateY(0);
    }

    5% {
        opacity: 0.8;
        transform: translateX(-200px) translateY(-390px) rotateY(288deg);
    }

    10% {
        opacity: 1;
        transform: translateX(-270px) translateY(-670px) rotateY(360deg);
    }

    36% {
        opacity: 0.8;
        transform: translateX(-285px) translateY(-600px) scale3d(1, 0.5, 1) rotateZ(60deg) rotateY(360deg);
    }

    52% {
        opacity: 1;
        transform: translateX(-300px) translateY(-550px) scale3d(1, 0.65, 1) rotateZ(60deg) rotateY(360deg);
    }

    68% {
        opacity: 0.8;
        transform: translateX(-300px) translateY(-500px) scale3d(1, 0.75, 1) rotateZ(-60deg) rotateY(360deg);
    }

    84% {
        opacity: 1;
        transform: translateX(-285px) translateY(-450px) scale3d(1, 0.85, 1) rotateZ(-60deg) rotateY(360deg);
    }

    100% {
        opacity: 0;
        transform: translateX(-270px) translateY(-400px) scale3d(1, 1, 1) rotateZ(0deg) rotateY(360deg);
    }
}

@-webkit-keyframes ribbon1Animation {
    0% {
        opacity: 0;
        transform: translateX(0) translateY(0) rotateZ(0) rotateY(0);
    }

    5% {
        opacity: 0.8;
        transform: translateX(-200px) translateY(-390px) rotateY(288deg);
    }

    10% {
        opacity: 1;
        transform: translateX(-270px) translateY(-670px) rotateY(360deg);
    }

    36% {
        opacity: 0.8;
        transform: translateX(-285px) translateY(-600px) scale3d(1, 0.5, 1) rotateZ(60deg) rotateY(360deg);
    }

    52% {
        opacity: 1;
        transform: translateX(-300px) translateY(-550px) scale3d(1, 0.65, 1) rotateZ(60deg) rotateY(360deg);
    }

    68% {
        opacity: 0.8;
        transform: translateX(-300px) translateY(-500px) scale3d(1, 0.75, 1) rotateZ(-60deg) rotateY(360deg);
    }

    84% {
        opacity: 1;
        transform: translateX(-285px) translateY(-450px) scale3d(1, 0.85, 1) rotateZ(-60deg) rotateY(360deg);
    }

    100% {
        opacity: 0;
        transform: translateX(-270px) translateY(-400px) scale3d(1, 1, 1) rotateZ(0deg) rotateY(360deg);
    }
}

.ribbon2Animation {
    -webkit-animation: ribbon2Animation 5s linear both;
    animation: ribbon2Animation 5s linear both;
}

@keyframes ribbon2Animation {
    0% {
        opacity: 0;
        transform: translateX(0) translateY(0);
    }

    5% {
        opacity: 0.8;
        transform: translateX(-300px) translateY(-390px);
    }

    10% {
        opacity: 1;
        transform: translateX(-360px) translateY(-550px);
    }

    40% {
        opacity: 0.8;
        transform: translateX(-340px) translateY(-450px) scale3d(1, 0.5, 1) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: translateX(-380px) translateY(-400px) scale3d(1, 0.65, 1) rotate(30deg);
    }

    60% {
        opacity: 0.8;
        transform: translateX(-380px) translateY(-350px) scale3d(1, 0.75, 1) rotate(30deg);
    }

    80% {
        opacity: 1;
        transform: translateX(-340px) translateY(-250px) scale3d(1, 0.85, 1) rotate(-30deg);
    }

    90% {
        opacity: 0.5;
        transform: translateX(-340px) translateY(-200px) scale3d(1, 0.95, 1) rotate(-30deg);
    }

    100% {
        opacity: 0;
        transform: translateX(-360px) translateY(-150px) scale3d(1, 1, 1) rotate(0deg);
    }
}

@-webkit-keyframes ribbon2Animation {
    0% {
        opacity: 0;
        transform: translateX(0) translateY(0);
    }

    5% {
        opacity: 0.8;
        transform: translateX(-300px) translateY(-390px);
    }

    10% {
        opacity: 1;
        transform: translateX(-360px) translateY(-550px);
    }

    40% {
        opacity: 0.8;
        transform: translateX(-340px) translateY(-450px) scale3d(1, 0.5, 1) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: translateX(-380px) translateY(-400px) scale3d(1, 0.65, 1) rotate(30deg);
    }

    60% {
        opacity: 0.8;
        transform: translateX(-380px) translateY(-350px) scale3d(1, 0.75, 1) rotate(30deg);
    }

    80% {
        opacity: 1;
        transform: translateX(-340px) translateY(-250px) scale3d(1, 0.85, 1) rotate(-30deg);
    }

    90% {
        opacity: 0.5;
        transform: translateX(-340px) translateY(-200px) scale3d(1, 0.95, 1) rotate(-30deg);
    }

    100% {
        opacity: 0;
        transform: translateX(-360px) translateY(-150px) scale3d(1, 1, 1) rotate(0deg);
    }
}

.ribbon3Animation {
    -webkit-animation: ribbon3Animation 5s linear both;
    animation: ribbon3Animation 5s linear both;
}

@keyframes ribbon3Animation {
    0% {
        opacity: 0;
        transform: translateX(0) translateY(0) rotateX(0);
    }

    5% {
        opacity: 0.8;
        transform: translateX(-300px) translateY(-390px) rotateX(288deg);
    }

    10% {
        opacity: 1;
        transform: translateX(-325px) translateY(-470px) rotateX(360deg);
    }

    40% {
        opacity: 0.8;
        transform: translateX(-350px) translateY(-410px) scale3d(1, 0.5, 1) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: translateX(-350px) translateY(-380px) scale3d(1, 0.65, 1) rotate(30deg);
    }

    60% {
        opacity: 0.8;
        transform: translateX(-325px) translateY(-350px) scale3d(1, 0.75, 1) rotate(30deg);
    }

    80% {
        opacity: 1;
        transform: translateX(-325px) translateY(-290px) scale3d(1, 0.85, 1) rotate(-30deg);
    }

    90% {
        opacity: 0.5;
        transform: translateX(-350px) translateY(-260px) scale3d(1, 0.95, 1) rotate(-30deg);
    }

    100% {
        opacity: 0;
        transform: translateX(-325px) translateY(-230px) scale3d(1, 1, 1) rotate(0deg);
    }
}

@-webkit-keyframes ribbon3Animation {
    0% {
        opacity: 0;
        transform: translateX(0) translateY(0) rotateX(0);
    }

    5% {
        opacity: 0.8;
        transform: translateX(-300px) translateY(-390px) rotateX(288deg);
    }

    10% {
        opacity: 1;
        transform: translateX(-325px) translateY(-470px) rotateX(360deg);
    }

    40% {
        opacity: 0.8;
        transform: translateX(-350px) translateY(-410px) scale3d(1, 0.5, 1) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: translateX(-350px) translateY(-380px) scale3d(1, 0.65, 1) rotate(30deg);
    }

    60% {
        opacity: 0.8;
        transform: translateX(-325px) translateY(-350px) scale3d(1, 0.75, 1) rotate(30deg);
    }

    80% {
        opacity: 1;
        transform: translateX(-325px) translateY(-290px) scale3d(1, 0.85, 1) rotate(-30deg);
    }

    90% {
        opacity: 0.5;
        transform: translateX(-350px) translateY(-260px) scale3d(1, 0.95, 1) rotate(-30deg);
    }

    100% {
        opacity: 0;
        transform: translateX(-325px) translateY(-230px) scale3d(1, 1, 1) rotate(0deg);
    }
}

.ribbon4Animation {
    -webkit-animation: ribbon4Animation 5s linear both;
    animation: ribbon4Animation 5s linear both;
}

@keyframes ribbon4Animation {
    0% {
        opacity: 0;
        transform: translateX(0) translateY(0) rotateX(0);
    }

    5% {
        opacity: 0.8;
        transform: translateX(200px) translateY(-390px) rotateX(288deg);
    }

    10% {
        opacity: 1;
        transform: translateX(295px) translateY(-690px) rotateX(360deg);
    }

    36% {
        opacity: 0.8;
        transform: translateX(260px) translateY(-630px) scale3d(1, 0.5, 1) rotateZ(-45deg) rotateX(360deg);
    }

    52% {
        opacity: 1;
        transform: translateX(260px) translateY(-570px) scale3d(1, 0.65, 1) rotateZ(-45deg) rotateX(360deg);
    }

    68% {
        opacity: 0.8;
        transform: translateX(300px) translateY(-510px) scale3d(1, 0.75, 1) rotateZ(45deg) rotateX(360deg);
    }

    84% {
        opacity: 1;
        transform: translateX(300px) translateY(-450px) scale3d(1, 0.85, 1) rotateZ(45deg) rotateX(360deg);
    }

    100% {
        opacity: 0;
        transform: translateX(260px) translateY(-390px) scale3d(1, 1, 1) rotateZ(0deg) rotateX(360deg);
    }
}

@-webkit-keyframes ribbon4Animation {
    0% {
        opacity: 0;
        transform: translateX(0) translateY(0) rotateX(0);
    }

    5% {
        opacity: 0.8;
        transform: translateX(200px) translateY(-390px) rotateX(288deg);
    }

    10% {
        opacity: 1;
        transform: translateX(295px) translateY(-690px) rotateX(360deg);
    }

    36% {
        opacity: 0.8;
        transform: translateX(260px) translateY(-630px) scale3d(1, 0.5, 1) rotateZ(-45deg) rotateX(360deg);
    }

    52% {
        opacity: 1;
        transform: translateX(260px) translateY(-570px) scale3d(1, 0.65, 1) rotateZ(-45deg) rotateX(360deg);
    }

    68% {
        opacity: 0.8;
        transform: translateX(300px) translateY(-510px) scale3d(1, 0.75, 1) rotateZ(45deg) rotateX(360deg);
    }

    84% {
        opacity: 1;
        transform: translateX(300px) translateY(-450px) scale3d(1, 0.85, 1) rotateZ(45deg) rotateX(360deg);
    }

    100% {
        opacity: 0;
        transform: translateX(260px) translateY(-390px) scale3d(1, 1, 1) rotateZ(0deg) rotateX(360deg);
    }
}

.ribbon5Animation {
    -webkit-animation: ribbon5Animation 5s linear both;
    animation: ribbon5Animation 5s linear both;
}

@keyframes ribbon5Animation {
    0% {
        opacity: 0;
        transform: translateX(0) translateY(0);
    }

    5% {
        opacity: 0.8;
        transform: translateX(200px) translateY(-390px);
    }

    10% {
        opacity: 1;
        transform: translateX(305px) translateY(-570px);
    }

    40% {
        opacity: 0.8;
        transform: translateX(340px) translateY(-420px) scale3d(1, 0.5, 1) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: translateX(340px) translateY(-370px) scale3d(1, 0.65, 1) rotate(45deg);
    }

    60% {
        opacity: 0.8;
        transform: translateX(300px) translateY(-320px) scale3d(1, 0.75, 1) rotate(45deg);
    }

    80% {
        opacity: 1;
        transform: translateX(300px) translateY(-270px) scale3d(1, 0.85, 1) rotate(-45deg);
    }

    90% {
        opacity: 0.5;
        transform: translateX(340px) translateY(-220px) scale3d(1, 0.95, 1) rotate(-45deg);
    }

    100% {
        opacity: 0;
        transform: translateX(300px) translateY(-170px) scale3d(1, 1, 1) rotate(0deg);
    }
}

@-webkit-keyframes ribbon5Animation {
    0% {
        opacity: 0;
        transform: translateX(0) translateY(0);
    }

    5% {
        opacity: 0.8;
        transform: translateX(200px) translateY(-390px);
    }

    10% {
        opacity: 1;
        transform: translateX(305px) translateY(-570px);
    }

    40% {
        opacity: 0.8;
        transform: translateX(340px) translateY(-420px) scale3d(1, 0.5, 1) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: translateX(340px) translateY(-370px) scale3d(1, 0.65, 1) rotate(45deg);
    }

    60% {
        opacity: 0.8;
        transform: translateX(300px) translateY(-320px) scale3d(1, 0.75, 1) rotate(45deg);
    }

    80% {
        opacity: 1;
        transform: translateX(300px) translateY(-270px) scale3d(1, 0.85, 1) rotate(-45deg);
    }

    90% {
        opacity: 0.5;
        transform: translateX(340px) translateY(-220px) scale3d(1, 0.95, 1) rotate(-45deg);
    }

    100% {
        opacity: 0;
        transform: translateX(300px) translateY(-170px) scale3d(1, 1, 1) rotate(0deg);
    }
}

.ribbon6Animation {
    -webkit-animation: ribbon6Animation 5s linear both;
    animation: ribbon6Animation 5s linear both;
}

@keyframes ribbon6Animation {
    0% {
        opacity: 0;
        transform: translateX(0) translateY(0) rotateX(0);
    }

    5% {
        opacity: 0.8;
        transform: translateX(300px) translateY(-390px) rotateX(288deg);
    }

    10% {
        opacity: 1;
        transform: translateX(342px) translateY(-470px) rotateX(360deg);
    }

    40% {
        opacity: 0.8;
        transform: translateX(380px) translateY(-350px) scale3d(1, 0.5, 1) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: translateX(300px) translateY(-310px) scale3d(1, 0.65, 1) rotate(30deg);
    }

    60% {
        opacity: 0.8;
        transform: translateX(380px) translateY(-270px) scale3d(1, 0.75, 1) rotate(30deg);
    }

    80% {
        opacity: 1;
        transform: translateX(342px) translateY(-230px) scale3d(1, 0.85, 1) rotate(-30deg);
    }

    90% {
        opacity: 0.5;
        transform: translateX(300px) translateY(-190px) scale3d(1, 0.95, 1) rotate(-30deg);
    }

    100% {
        opacity: 0;
        transform: translateX(342px) translateY(-150px) scale3d(1, 1, 1) rotate(0deg);
    }
}

@-webkit-keyframes ribbon6Animation {
    0% {
        opacity: 0;
        transform: translateX(0) translateY(0) rotateX(0);
    }

    5% {
        opacity: 0.8;
        transform: translateX(300px) translateY(-390px) rotateX(288deg);
    }

    10% {
        opacity: 1;
        transform: translateX(342px) translateY(-470px) rotateX(360deg);
    }

    40% {
        opacity: 0.8;
        transform: translateX(380px) translateY(-350px) scale3d(1, 0.5, 1) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: translateX(300px) translateY(-310px) scale3d(1, 0.65, 1) rotate(30deg);
    }

    60% {
        opacity: 0.8;
        transform: translateX(380px) translateY(-270px) scale3d(1, 0.75, 1) rotate(30deg);
    }

    80% {
        opacity: 1;
        transform: translateX(342px) translateY(-230px) scale3d(1, 0.85, 1) rotate(-30deg);
    }

    90% {
        opacity: 0.5;
        transform: translateX(300px) translateY(-190px) scale3d(1, 0.95, 1) rotate(-30deg);
    }

    100% {
        opacity: 0;
        transform: translateX(342px) translateY(-150px) scale3d(1, 1, 1) rotate(0deg);
    }
}

.resLightAnimation {
    -webkit-animation: resLightAnimation 2s linear both;
    animation: resLightAnimation 2s linear both;
}

@-webkit-keyframes resLightAnimation {

    0%,
    100% {
        transform: translateY(0);
    }

    10% {
        transform: translateY(-48px);
    }

    50% {
        transform: translateY(-70px);
    }
}

@keyframes resLightAnimation {

    0%,
    100% {
        transform: translateY(0);
    }

    10% {
        transform: translateY(-48px);
    }

    50% {
        transform: translateY(-70px);
    }
}

.resLightAnimation2 {
    -webkit-animation: resLightAnimation2 3s both infinite;
    animation: resLightAnimation2 3s both infinite;
}

@-webkit-keyframes resLightAnimation2 {
    0% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.4;
    }
}

@keyframes resLightAnimation2 {
    0% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.4;
    }
}

.startAnimation {
    -webkit-animation: startAnimation 5s infinite;
    animation: startAnimation 5s infinite;
}

@-webkit-keyframes startAnimation {

    0%,
    50%,
    100% {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0;
    }
}

@keyframes startAnimation {

    0%,
    50%,
    100% {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0;
    }
}

.bubbleAnimation {
    -webkit-animation: bubbleAnimation 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) forwards;
    animation: bubbleAnimation 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) forwards;
}

@-webkit-keyframes bubbleAnimation {
    0% {
        -webkit-transform: translateY(0px) scaleY(2.5) scaleX(0.2);
        transform: translateY(0px) scaleY(2.5) scaleX(0.2);
        -webkit-filter: blur(40px);
        filter: blur(40px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(-340px) scaleY(1) scaleX(1);
        transform: translateY(-340px) scaleY(1) scaleX(1);
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
    }
}

@keyframes bubbleAnimation {
    0% {
        -webkit-transform: translateY(0px) scaleY(2.5) scaleX(0.2);
        transform: translateY(0px) scaleY(2.5) scaleX(0.2);
        -webkit-filter: blur(40px);
        filter: blur(40px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(-340px) scaleY(1) scaleX(1);
        transform: translateY(-340px) scaleY(1) scaleX(1);
        -webkit-filter: blur(0);
        filter: blur(0);
        opacity: 1;
    }
}


.bubbleAnimation2 {
    -webkit-animation: bubbleAnimation2 3s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
    animation: bubbleAnimation2 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

@-webkit-keyframes bubbleAnimation2 {

    0%,
    100% {
        -webkit-transform: translateY(-340px);
        transform: translateY(-340px);
        position: relative;
        z-index: 110;

    }

    50% {
        -webkit-transform: translateY(-360px);
        transform: translateY(-360px);
        position: relative;
        z-index: 110;

    }
}

@keyframes bubbleAnimation2 {

    0%,
    100% {
        -webkit-transform: translateY(-340px);
        transform: translateY(-340px);
        position: relative;
        z-index: 110;

    }

    50% {
        -webkit-transform: translateY(-360px);
        transform: translateY(-360px);
        position: relative;
        z-index: 110;
    }
}